
<html lang="en">
<head>
    <title>plotly图表</title>
    <style>
        h1 { text-align: center; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #977d74; text-align: center; padding: 8px; }
        th { background-color: #ddddddda; }
        button { margin-left: 5px; }
        #plotlyChart { margin-top: 20px; text-align: center; }
    </style>
</head>
<body>
    <h1>增删改查</h1>
    <button onclick="addRow()">新增数据</button>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="plotlyChart"></div>
    
    <script src="./plotly-latest.min.js"></script>
    <script>
        var tableData = [
            { name: '李华', age:40 },
            { name: '李明', age: 35 },
            { name: 'Alice', age: 25}
        ];
        
        var table = document.getElementById('table');
        var plotlyChart = document.getElementById('plotlyChart');

        function renderTable() {
            table.innerHTML = `
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            `;
            
            tableData.forEach((data, index) => {
                var row = table.insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                
                cell1.innerHTML = data.name;
                cell2.innerHTML = data.age;
                cell3.innerHTML = `
                    <button onclick="editRow(${index})">编辑</button>
                    <button onclick="deleteRow(${index})">删除</button>
                `;
            });

            updatePlotlyChart(); 
        }

        function addRow() {
            var name = prompt('请输入姓名');
            var age = prompt('请输入年龄');
            tableData.push({ name, age });
            renderTable();
        }

        function editRow(index) {
            var newName = prompt('请输入新姓名');
            var newAge = prompt('请输入新年龄');
            tableData[index] = { name: newName, age: newAge };
            renderTable();
        }

        function deleteRow(index) {
            tableData.splice(index, 1);
            renderTable();
        }

        function updatePlotlyChart() {
            var data = [{
                x: tableData.map((data) => data.name),
                y: tableData.map((data) => data.age),
                type: 'bar'
            }];
            
            var layout = {
                title: 'Plotly图表'
            };
            
            Plotly.newPlot('plotlyChart', data, layout);
        }

        renderTable(); 
    </script>
</body>
</html>




